<template>
  <div class="login-container">
    <div class="login-header">用户登录</div>
    <div class="login-btn-group">
      <div class="login-btn" @click="setUserRole(1)" :class="active == 1?'login-btn-active':'login-btn-normal'">
        <img class="login-btn-img" src="../assets/img/bm.png" alt="">
        <span>我是参赛者</span>
      </div>
      <div class="login-btn" @click="setUserRole(2)" :class="active == 2?'login-btn-active':'login-btn-normal'">
        <img class="login-btn-img" src="../assets/img/pw.png" alt="">
        <span>我是评委</span>
      </div>
      <div class="user-ready">
        <van-checkbox v-model="checkStatus"></van-checkbox>
        <span style="margin-left:0.1rem;" @click="showxy=true">请阅读并同意<span class="user-xy">《用户协议》</span></span>
      </div>
      <div style="margin: 0.4rem 0.3rem;">
        <van-button round block type="info" @click="submit">立即登录</van-button>
      </div>
    </div>
    <van-popup v-model="showxy" :style="{ height: '100%',width:'100%' }">
      <div style="height: 100vh;background-color: #fff;padding-bottom:1rem;">
        <iframe src="./user-protocol.html" frameborder="0" style="height: 100%;width: 100%;"></iframe>
        <div class="popup-close-group">
          <div class="popup-close-button" @click="onReady">我已阅读并同意</div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { Toast, Form, Field, Button, Checkbox, Popup } from 'vant';
export default {
  components: {
    [Field.name]: Field, [Form.name]: Form, [Button.name]: Button, [Checkbox.name]: Checkbox, [Popup.name]: Popup
  },
  data: function () {
    return {
      active: sessionStorage.getItem('USER_STATE'),
      checkStatus: false,
      showxy: false
    };
  },
  mounted() {
    let openid = localStorage.getItem('YF_USER_INFOS_OPENID');
    if (openid && openid != 'null' && openid != 'undefined') {
      this.getBaseUserInfo(openid);
    } else {
      const code = this.getUrlParam('code');
      if (code) {
        this.getWxUserInfo(code);
      }
    }
  },
  methods: {
    onReady() {
      this.checkStatus = true;
      this.showxy = false;
    },
    setUserRole(flag) {
      sessionStorage.setItem('USER_STATE', flag);
      this.active = flag;
    },
    submit() {
      if (this.active != 1 && this.active != 2) {
        return this.$notify({ type: 'warning', message: '请选择一个角色' });
      }
      if (!this.checkStatus) {
        return this.$notify({ type: 'warning', message: '请阅读并同意用户协议' });
      }
      this.getLogin();
    },
    getLogin() {
      this.getWxCode();
    },
    getBaseUserInfo(openid) {
      Toast.loading({ message: "加载中...", forbidClick: true });
      this.$http
        .post(this.$API.GET_APP_USERINFO, { openid })
        .then((res) => {
          Toast.clear();
          if (res.code == 1) {
            this.setStorageUser(res.data);
          } else {
            this.$notify({ type: 'warning', message: res.msg });
          }
        });
    },
    getWxCode() {
      this.$http
        .post(this.$API.GET_WX_CODE, { page_url: window.location.href })
        .then((res) => {
          if (res.code == 1) {
            window.location.href = res.data;
          } else {
            this.$notify({ type: 'warning', message: res.msg });
          }
        });
    },
    getWxUserInfo(code) {
      this.$http
        .post(this.$API.GET_WX_USERINFO, { code, status: sessionStorage.getItem('USER_STATE') })
        .then((res) => {
          if (res.code == 1) {
            this.setStorageUser(res.data);
          } else {
            this.$notify({ type: 'warning', message: res.msg });
          }
        });
    },
    setStorageUser(data) {
      localStorage.setItem('YF_USER_INFOS', JSON.stringify(data));
      localStorage.setItem('YF_USER_INFOS_ID', data.id);
      localStorage.setItem('YF_USER_INFOS_OPENID', data.openid);
      let href = sessionStorage.getItem('YF_LOGIN_HREF');
      if (href) {
        window.location.href = href
      } else {
        this.$router.push('/')
      }
    },
    getUrlParam(name) {
      const url = window.location.href;
      if (url.indexOf('?') !== -1) {
        var query = window.location.href.split("?")[1];
        if (query) {
          var vars = query.split("&");
          for (var i = 0; i < vars.length; i++) {
            var pair = vars[i].split("=");
            if (pair[0] == name) {
              return pair[1];
            }
          }
          return (false);
        }
        return (false);
      }
      return (false);
    },
  },
};
</script>

<style lang="less">
.login-container {
  width: 100%;
  height: 100%;

  .login-header {
    height: 1.8rem;
    background: linear-gradient(to bottom right, #4da5fe 0%, #45a0ff 100%);
    font-size: 0.4rem;
    color: #fff;
    text-align: center;
    line-height: 1.8rem;
  }
  .user-ready {
    display: flex;
    padding: 0.5rem 0 0.3rem 0;
    font-size: 0.3rem;
    color: #888;
    .user-xy {
      color: #45a0ff;
    }
  }

  .login-btn-group {
    padding: 0.4rem;

    .login-btn {
      height: 2rem;
      display: flex;
      align-items: center;
      background: #ffffff;

      border-radius: 8px 8px 0px 0px;
      justify-content: space-between;
      padding: 0 0.4rem;
      margin-top: 0.6rem;
      font-weight: bold;
      color: #333;
      font-size: 0.3rem;
    }

    .login-btn-normal {
      border: 1px solid #fff;
      box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.1);
    }

    .login-btn-active {
      border: 1px solid #fff;
      box-shadow: 0px 2px 20px 0px rgba(12, 109, 189, 0.5);
    }

    .login-btn-img {
      height: 1.6rem;
      width: auto;
    }
  }
  .popup-close-group {
    padding: 0.1rem 24%;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
  }
  .popup-close-button {
    height: 0.7rem;
    background: #222fef;
    color: #fff;
    line-height: 0.7rem;
    border-radius: 0.35rem;
    text-align: center;
    font-size: 0.28rem;
  }
}
</style>